<template>
	<view class="">
		<view class="box" v-show="flag==0">
			<view class="top">
				<view class="integral" @click="showIntegral()">
					积分明细
				</view>
				<view class="bottom">
					<view class="bot-left" @click="integralCount()">积分计算规则</view>
					<view class="bot-right" @click="returns()">退换货规则提示</view>
				</view>
			</view>
			<view class="lists">
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201803/08005901/c41olcs56y2dq292.jpg!480" mode=""></image>
					<text>数码</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201611/03080626/idk0r5xfbpwoobcj.jpg!480" mode=""></image>
					<text>家居</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201803/08005901/c41olcs56y2dq292.jpg!480" mode=""></image>
					<text>厨房</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201611/03080626/idk0r5xfbpwoobcj.jpg!480" mode=""></image>
					<text>箱包</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201611/03080626/idk0r5xfbpwoobcj.jpg!480" mode=""></image>
					<text>家电</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201803/08005901/c41olcs56y2dq292.jpg!480" mode=""></image>
					<text>户外</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201611/03080626/idk0r5xfbpwoobcj.jpg!480" mode=""></image>
					<text>家纺</text>
				</view>
				<view class="list-item">
					<image src="https://pic.36krcnd.com/avatar/201611/03080626/idk0r5xfbpwoobcj.jpg!480" mode=""></image>
					<text>配饰</text>
				</view>
			</view>
			<view class="goods-list">
				<view class="list-title">
					<label class="iconfont jingxuan">&#xe63b;</label>精选产品
				</view>
				<view class="goods-items">
					<product-list></product-list>

				</view>
			</view>

		</view>
		<view class="box2" v-show="flag==1">
			<view class="search-top">
				<searchTemp></searchTemp>
			</view>
			<view class="container">
				<view class="page-body">
					<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
						<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index" :class="index==categoryActive?'active':''"
						 v-for="(item,index) in categoryList">
							<view class="nav-left-name" :class="index==categoryActive?'active-border':''" @click="toFenlei(item.NAME)">
								<image :src="index==categoryActive?item.selectLogo:item.logo" mode="aspectFit" class="logoImg"></image>
								{{item.NAME}}
							</view>
						</view>
					</scroll-view>
					<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'"
					 scroll-with-animation>
						<view class="">
							<image class="banner" :src="banner" mode="aspectFit"></image>
						</view>
						<view class="class-box" v-for="item in categoryList">
							<view class="class-name">{{item.NAME}}</view>
							<view class="nav-item-box">
								<view :id="index1===0?'first':''" class="nav-right-item" v-for="(item,index1) in item.subCategoryList.list"
								 :key="index1">
									<image :src="item.LOGO" class="item-img" />
									<view class="item-name">{{item.NAME}}</view>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>
		</view>
		<view class="box3" v-show="flag==2">
			<view class="car-box">
				<view class="car-item" v-for="(item,index) in carList">
					<view class="xuanze-address" @click="selectCargoods($event,index)" ref="selectBox">
					</view>
					<view class="dingdan-goods">
						<view class="goods-left">
							<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
							 mode="aspectFit" class="goods-left"></image>
						</view>
						<view class="goods-right">
							<view class="goods-right-top">
								<view class="goods-name twoLines">
									{{item.goodName}}
								</view>

							</view>

							<view class="goods-chicun">
								尺寸:{{item.xinghao}} 内存:{{item.neicun}}
							</view>
							<view class="goods-yanse">颜色:{{item.color}}</view>

							<view class="goods-jifen-suliang">
								<view class="">
									<label class="goods-newjifen">{{item.jifen}}</label> 积分
								</view>
								<view class="">
									<uniNumberBox></uniNumberBox>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="car-bottom">
				<view class="quanxuan">
					<view class="xuanze-address-icon quanxuan-icon" @click="quanxuan" ref="all">
					</view>
					全选
				</view>
				<view class="quanxuan-right">
					<view class="quanxuan-right-l">
						合计
						<view class="color-orange">
							<label class="font18">1888</label>积分
						</view>
					</view>
					<view class="jiesuan-btn">
						结算
					</view>

				</view>
			</view>
		</view>
		<view class="box4" v-show="flag==3">
			<view class="topBox">
				<view class="nav">
					<view class="go-back iconfont">

					</view>
					<view class="middle">
						我的
					</view>
					<view class="set-btn">

					</view>
				</view>
				<view class="lcs-message">
					<view class="touxiang-left">
						<image src="http://ai.ylcaifu.com/appimg/images/6.0-%E6%88%91%E7%9A%84%E6%8A%95%E8%B5%84%E4%BA%BA/6.0-%E6%88%91%E7%9A%84%E6%8A%95%E8%B5%84%E4%BA%BA/android/drawable-xhdpi/touxiang.png"
						 mode=""></image>
					</view>
					<view class="message-right">
						<view class="message-right-top">
							尚鹤楠
						</view>
						<view class="message-right-bottom">
							14313131313
						</view>
					</view>
				</view>
				<view class="box4-class-box">
					<view class="class-item">
						<view class="class-item-top">300</view>
						<view class="class-item-bottom">我的关注</view>
					</view>
					<view class="class-item class-item-2">
						<view class="class-item-top">1000</view>
						<view class="class-item-bottom">浏览历史</view>
					</view>
				</view>
			</view>
			<view class="box4-content">
				<view class="box4-dingdan">我的订单</view>
				<view class="box4-xiangqing">
					<view class="box4-xiangqing-item" @click="toWodedingdan">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.2-%E6%88%91%E7%9A%84/android/drawable-xhdpi/quanbu.png"
						 class="xiangqing-item-image" mode="widthFix" />
						<view class="xiangqing-item-bot">全部</view>
					</view>
					<view class="box4-xiangqing-item">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.2-%E6%88%91%E7%9A%84/android/drawable-xhdpi/daifahuo.png"
						 class="xiangqing-item-image" mode="widthFix" />
						<view class="xiangqing-item-bot">待发货</view>
					</view>
					<view class="box4-xiangqing-item">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.2-%E6%88%91%E7%9A%84/android/drawable-xhdpi/daishouhuo.png"
						 class="xiangqing-item-image" mode="widthFix" />
						<view class="xiangqing-item-bot">待收货</view>
					</view>
					<view class="box4-xiangqing-item">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.2-%E6%88%91%E7%9A%84/android/drawable-xhdpi/pingjia.png"
						 class="xiangqing-item-image" mode="widthFix" />
						<view class="xiangqing-item-bot">评价</view>
					</view>
				</view>
			</view>

		</view>
		<view class="bottomTab">
			<view class="index item " :class="{active:index==clickindex}" v-for="(item,index) in bottomTab" @click="tab(index)">
				<view class="imgBox">
					<image :src="index==clickindex?item.selectImg:item.imgUrl" mode="aspectFit"></image>
				</view>
				<view class="title" :class="{active:index==clickindex}">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniNavBar from '../../../components/uni-nav-bar.vue';
	import swiperTemp from '../../../components/swiper-temp.vue';
	import searchTemp from '../../../components/search-temp.vue';
	import uniIcon from '../../../components/uni-icon.vue';
	import productList from '../../../components/product-list/product-list.vue';
	import leftCategory from '../../../components/left-category/left-category.vue';
	import uniNumberBox from "@/components/uni-number-box.vue";
	export default {
		components: {
			swiperTemp,
			searchTemp,
			uniIcon,
			productList,
			leftCategory,
			uniNumberBox
		},
		data() {
			return {
				subCategory: [],
				//height: 1000,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				bannerUrl: '',
				clickindex: '0',
				flag: 0,
				height: 0,
				bottomTab: [{
					id: 1,
					imgUrl: "../../../static/image/indexImg/shangcheng/shouyemeren.png",
					selectImg: "../../../static/image/indexImg/shangcheng/shouyeanxia.png",
					name: '首页'

				}, {
					id: 2,
					imgUrl: "../../../static/image/indexImg/shangcheng/fenleimeren.png",
					selectImg: "../../../static/image/indexImg/shangcheng/fenleianxia.png",
					name: '分类'

				}, {
					id: 1,
					imgUrl: "../../../static/image/indexImg/shangcheng/gouwuchemeren.png",
					selectImg: "../../../static/image/indexImg/shangcheng/gouwucheanxia.png",
					name: '购物车'

				}, {
					id: 1,
					imgUrl: "../../../static/image/indexImg/shangcheng/wodemeren.png",
					selectImg: "../../../static/image/indexImg/shangcheng/wodeanxia.png",
					name: '我的'

				}],
				banner: "http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1-%E5%88%86%E7%B1%BB/android/drawable-xhdpi/banner.png",

				categoryList: [{
						"NAME": "数码",
						"logo": "/static/image/indexImg/shangcheng/fenlei/shumaweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/shumaxuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类1",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类1",
									"LOGO": "http://placehold.it/50x50"
								},
								{

									"NAME": "分类1",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类1",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "家居",
						"logo": "/static/image/indexImg/shangcheng/fenlei/jiajuweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/jiajuxuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类2",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类2",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "厨房",
						"logo": "/static/image/indexImg/shangcheng/fenlei/chufangweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/chufangxuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "箱包",
						"logo": "/static/image/indexImg/shangcheng/fenlei/xiangbaoweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/xiangbaoxuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类4",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "家电",
						"logo": "/static/image/indexImg/shangcheng/fenlei/jiadianweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/jiadianxuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类4",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "户外",
						"logo": "/static/image/indexImg/shangcheng/fenlei/huwaiweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/huwaixuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类4",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "家纺",
						"logo": "/static/image/indexImg/shangcheng/fenlei/jiafangweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/jiafangxuanzhon.png",
						"subCategoryList": {

							list: [{

									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类4",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					},
					{

						"NAME": "配饰",
						"logo": "/static/image/indexImg/shangcheng/fenlei/peishiweixuanzhon.png",
						"selectLogo": "/static/image/indexImg/shangcheng/fenlei/peishixuanzhon.png",
						"subCategoryList": {
							list: [{

									"NAME": "分类3",
									"LOGO": "http://placehold.it/50x50"
								},
								{
									"NAME": "分类4",
									"LOGO": "http://placehold.it/50x50"
								}
							]
						}
					}
				],
				carChecked: -1, //购物车列表选择，默认不选
				allChecked: false, //是否全选
				itemChecked: false,
				carList: [{
						goodName: '华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机',
						xinhao: '6.39英寸',
						neicun: '8GB+128GB',
						color: '幻夜黑',
						jifen: '200'
					},
					{
						goodName: '华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机',
						xinhao: '6.39英寸',
						neicun: '8GB+128GB',
						color: '幻夜黑',
						jifen: '200'
					},
					{
						goodName: '华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机',
						xinhao: '6.39英寸',
						neicun: '8GB+128GB',
						color: '幻夜黑',
						jifen: '200'
					}
				]
			};
		},
		methods: {
			returns() {
				uni.navigateTo({
					url: '../../../pages/index/store/jifen/returns',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			integralCount() {
				uni.navigateTo({
					url: '../../../pages/index/store/jifen/integral-count',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			showIntegral() {
				uni.navigateTo({
					url: '../../../pages/index/store/jifen/integral',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				this.categoryActive = index;
				/* this.bannerUrl = categroy.subCategoryList.banner
				this.subCategory = categroy.subCategoryList.list; */
				this.scrollTop = -this.scrollHeight * index;
			},
			tab(index) {
				this.flag = index
				this.clickindex = index
			},
			toFenlei(navName) {
				uni.navigateTo({
					url: './fenlei/fenlei?navName=' + navName,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toWodedingdan() {
				uni.navigateTo({
					url: './wodedingdan/wodedingdan',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//购物车部分
			quanxuan() { //全选
				console.log()
				if (this.$refs.all.$el.className.indexOf('select-goods') == -1) {
					this.$refs.selectBox.forEach(function(item) {
						item.$el.className = "xuanze-address select-goods"
					})
					this.$refs.all.$el.className = 'select-goods xuanze-address-icon quanxuan-icon'
				} else {
					this.$refs.selectBox.forEach(function(item) {
						item.$el.className = "xuanze-address"
					})
					this.$refs.all.$el.className = 'xuanze-address-icon quanxuan-icon'
				}

			},
			selectCargoods(e, index) { //选择某商品
				this.carChecked = index;
				console.log(e)
				console.log(index)
				console.log(e.target.className)
				if (this.$refs.selectBox[index].$el.className.indexOf('select-goods') === -1) {
					this.$refs.selectBox[index].$el.className = "xuanze-address select-goods";

				} else {
					this.$refs.selectBox[index].$el.className = "xuanze-address"
				}
			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight - 90;
			console.log(uni.getSystemInfoSync().windowHeight)
		}


	}
</script>

<style>
	.box,
	.box2,
	.box3,
	.box4 {
		padding-bottom: 100upx;

	}
	.top {
		width: 100%;
		height: 200px;
		background: url(../../../static/image/store/timg.jpg) no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
	.integral {
		width: 100px;
		height: 35px;
		line-height: 35px;
		background: rgb(240,227,198);
		position: absolute;
		top: 50px;
		right: 0;
		border-radius: 17px 0 0 17px;
		text-align: center;
		box-shadow: 2px 2px 10px rgb(200,178,135),-2px 2px 10px rgb(200,178,135);
		font-size: 14px;
	}
	.bottom {
		width: 100%;
		height: 35px;
		line-height: 35px;
		font-weight: 700;
		border-top: 1px solid #ccc;
		position: absolute;
		bottom: 0;
		display: flex;
	}
	.bot-left,
	.bot-right{
		flex: 1;
		text-align: center;
		color: #2C2A29;
	}
	.bot-right {
		border-left: 1px solid #fff;
	}
	.input-placeholder {
		color: #007AFF;
	}

	.user {
		padding: 0 20upx;
		color: #999999;
	}

	.search-top {

		width: 100%;
	}

	.lists {
		background: #fff;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-bottom: 20upx;
		padding: 32upx 0 0;
	}

	.list-item {
		flex: 25%;
		text-align: center;
		padding-bottom: 20upx;

	}

	.list-item image {

		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.list-item text {
		display: block;

		line-height: 46upx;
	}

	.list-title {
		display: flex;
		flex-direction: row;
		padding: 0 30upx;
		align-items: center;
		justify-content: center;
		font-size: 15px;
	}

	.jingxuan {
		color: rgb(200, 166, 91);
		font-size: 40upx;
		margin-right: 12upx;
	}

	.goods-list {}

	.goods-items {
		margin-top: 20upx;
	}

	.goods-item {

		background: #fff;

	}

	.bottomTab {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		background: rgb(255, 255, 255);
		padding-top: 6upx;
	}

	.bottomTab .imgBox {
		height: 44upx;
		width: 44upx;
		margin-bottom: 4upx;
	}

	.bottomTab .imgBox image {
		height: 44upx;
		width: 44upx;

	}

	.bottomTab .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bottomTab .title {
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin: 0 0 12upx;
		font-size: 9px;
	}

	.bottomTab .active {
		color: rgba(196, 156, 90, 1)
	}

	.box2-class {}


	/* 我的样式 */
	.topBox {
		width: 100%;
		background: url("http://ai.ylcaifu.com/appimg/images/6.0-%E6%88%91%E7%9A%84%E6%8A%95%E8%B5%84%E4%BA%BA/6.0-%E6%88%91%E7%9A%84%E6%8A%95%E8%B5%84%E4%BA%BA/android/drawable-xhdpi/beijing.png") no-repeat;
		background-size: 100% 100%;
		height: 185px;
	}

	.nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 34px 15px 15px 18px;
		color: rgb(255, 255, 255);
	}

	.middle {
		font-size: 18px;
	}

	.go-back {
		font-size: 17px;
	}

	.lcs-message {
		display: flex;
		flex-direction: row;
		padding-left: 25px;
	}

	.touxiang-left,
	.touxiang-left image {
		height: 70px;
		width: 70px;
	}

	.touxiang-left {
		margin-right: 28upx;
	}

	.message-right {
		color: rgb(255, 255, 255);
	}

	.message-right-top {
		padding: 10upx 0;
		font-size: 22px;

	}

	.message-right-bottom {
		font-size: 15px;
	}

	.box4-class-box {
		width: 710upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		height: 120upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
		margin: 38upx 20upx 0;
		align-items: center;
	}

	.class-item {
		flex: 1;
	}

	.class-item-2 {
		border-right: 1px solid rgba(242, 241, 240, 1);
		border-left: 1px solid rgba(242, 241, 240, 1);
	}

	.class-item-top {
		font-size: 18px;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 28px;
	}

	.class-item-bottom {
		color: rgba(187, 187, 187, 1);
		font-size: 12px;
		line-height: 30upx;
	}

	.box4-content {
		margin-top: 60px;
		padding: 0 30upx;
	}

	.box4-dingdan {
		font-size: 17px;

		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		border-left: 4px solid rgba(203, 147, 89, 1);
		text-indent: 10px;
		margin-bottom: 30px;
	}

	.box4-xiangqing {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		text-align: center;

	}

	.xiangqing-item-image {
		height: 24px;
		width: 24px;
	}

	.xiangqing-item-bot {
		font-size: 12px;

		font-weight: 500;
		color: rgba(119, 119, 119, 1);
		line-height: 20px;
	}

	.container {
		background: rgb(255, 255, 255);
		color: rgba(51, 51, 51, 1);
		font-weight: 500;
	}

	.page-body {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 200upx;
		padding-top: 10upx;
		border-right: solid 1px rgba(238, 238, 238, 1);
	}

	.nav-left-item {
		width: 100%;
		height: 52upx;
		padding: 24upx 0;
		border-bottom: solid 1px rgba(238, 238, 238, 1);
		;
	}

	.nav-left-name {
		width: 100%;
		text-align: center;
		line-height: 52upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.nav-right {
		padding: 30upx;

	}

	.nav-item-box {}

	.nav-right-item {

		width: 30%;
		text-align: center;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		float: left;
		margin-right: 3%;
		margin-bottom: 20upx;

	}

	.nav-right-item .item-img {
		width: 150upx;
		height: 150upx;
	}

	.item-name {}


	.active {
		color: rgba(196, 156, 90, 1);
		background: rgba(245, 245, 245, 1);
	}

	.active-border {
		background: url("http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1-%E5%88%86%E7%B1%BB/android/drawable-xhdpi/xuanzhon.png") no-repeat left center;
		background-size: 6upx 52upx;
	}

	.logoImg {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;

	}

	.banner {
		width: 530upx;
		height: 170upx;
		border-radius: 5upx;
		margin-bottom: 30upx;
	}

	.class-box {}

	.class-name {
		position: relative;
		font-size: 12px;
		line-height: 60upx;
		font-weight: 500;
		color: rgba(196, 156, 90, 1);
		clear: both;
	}

	.class-name::after {
		width: 80%;
		height: 1px;
		content: '';

		/*CSS伪类用法*/
		position: absolute;
		/*定位背景横线的位置*/
		top: 50%;
		right: 5%;
		background: rgba(238, 238, 238, 1);

		/*宽和高做出来的背景横线*/


	}




	/* car */
	.car-box {
		margin-top: 10px;
	}

	.car-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: rgb(255, 255, 255)
	}

	.dingdan-goods {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 20upx 10px 0;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		flex: 1;
	}

	.goods-left {
		height: 100px;
		width: 100px;

	}

	.goods-right {
		padding-left: 30upx;
		flex: 1;
	}

	.goods-right-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 15px;
		width: 303upx;
		font-weight: bold;
	}

	.goods-right-top-r {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.goods-right-top-r .num {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.goods-newjifen {

		font-weight: bold;
		font-size: 18px;
		line-height: 19px;
	}

	.goods-xijie {
		font-size: 12px;

		color: rgba(196, 156, 90, 1);
	}

	.goods-chicun,
	.goods-yanse {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.dingdan-pingjia {
		width: 50px;
		height: 25px;
		border: 1px solid rgba(196, 156, 90, 1);
		border-radius: 25px;
		text-align: center;
		line-height: 25px;
		color: rgba(196, 156, 90, 1);
	}

	.jifen {
		font-size: 14px;
		font-weight: bold;
		margin: 0 3px;
	}

	.xuanze-address,
	.xuanze-address-icon {
		height: 20px;
		width: 20px;
		background: url("http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.2.3-%E6%B7%BB%E5%8A%A0%E8%B4%AD%E7%89%A9%E5%9C%B0%E5%9D%80/android/drawable-xhdpi/%E6%A4%AD%E5%9C%861%E6%8B%B7%E8%B4%9D.png") center no-repeat;
		background-size: 100%;

	}

	.select-goods {
		height: 20px;
		width: 20px;
		background: url("http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.2.3-%E6%B7%BB%E5%8A%A0%E8%B4%AD%E7%89%A9%E5%9C%B0%E5%9D%80/android/drawable-xhdpi/Checked.png") center no-repeat;
		background-size: 100%;
	}

	.quanxuan,
	.quanxuan-right {
		display: flex;
		flex-direction: row;
	}

	.quanxuan-right-l {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-right: 20px;
	}

	.xuanze-address {
		margin: 0 10upx 0 30upx;
	}

	.goods-jifen-suliang {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between
	}

	.car-bottom {
		padding: 0 30upx;
		width: 690upx;
		position: fixed;
		bottom: 49px;
		height: 49px;
		background: rgb(255, 255, 255);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.quanxuan-icon {
		margin-right: 10px;
	}

	.jiesuan-btn {
		width: 80px;
		height: 35px;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35upx;
		line-height: 35px;
		color: rgb(255, 255, 255);
		text-align: center;
	}

	.color-orange {
		color: #FF5601;
	}

	.font18 {
		font-size: 16px;
		margin-right: 3px;
	}
</style>
